<template>
  <!--合同订单视图-->
  <div style="background-color: #E9EEF3;">
    <el-row>
      <el-col :span="20" :offset="2" style="color: #333333;margin-top: 20px;">
        <el-row class="m-b-10">
          <el-col :offset="2" :span="4">
            <div style="line-height: 56px;font-size: 18px;width:200px">审批过程：</div>
          </el-col>
          <!--同意显示同意-->
          <el-col v-if="this.contract.contractAppStatus !== 3" :span="18">
            <el-steps :active="active" finish-status="success" space="20%">
              <el-step title="待申请"></el-step>
              <el-step title="待审批"></el-step>
              <el-step title="同意"></el-step>
              <el-step title="执行"></el-step>
            </el-steps>
          </el-col>
          <!--否决显示否决-->
          <el-col v-if="this.contract.contractAppStatus === 3" :span="18">
            <el-steps :active="active" finish-status="success" space="20%">
              <el-step title="待申请"></el-step>
              <el-step title="待审批"></el-step>
              <el-step title="否决"></el-step>
              <el-step title="执行"></el-step>
            </el-steps>
          </el-col>
        </el-row>
        <el-row class="m-b-20">
          <el-row v-if="this.contract.contractAppStatus === 0">
            <el-col  :offset="8" :span="4" >
              <div class="opera" @click="findAllEmp(currPage,pageSize)">
                <div style="line-height: 30px;"><i class="el-icon-position"/></div>
                <span class="font-14">申请审批</span>
              </div>
            </el-col>
            <el-col  :span="4" >
              <div class="opera-no">
                <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
                <span class="font-14">撤销审批</span>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="this.contract.contractAppStatus === 1">
            <el-col  :offset="8" :span="4" >
              <div class="opera-no">
                <div style="line-height: 30px;"><i class="el-icon-position"/></div>
                <span class="font-14">申请审批</span>
              </div>
            </el-col>
            <el-col  :span="4" >
              <div class="opera" @click="repealApp">
                <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
                <span class="font-14">撤销审批</span>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="this.contract.contractAppStatus === 3">
            <el-col  :offset="8" :span="4" >
              <div class="opera" @click="findAllEmp(currPage,pageSize)">
                <div style="line-height: 30px;"><i class="el-icon-position"/></div>
                <span class="font-14">申请审批</span>
              </div>
            </el-col>
            <el-col  :span="4" >
              <div class="opera-no">
                <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
                <span class="font-14">撤销审批</span>
              </div>
            </el-col>
          </el-row>
          <!-- 员工表格dialog-->
          <el-dialog width="30%" title="申请审批" :visible.sync="innerDialog">
            <div style="margin-bottom: 20px"><span class="font-14-bold">说明：</span>以下人员拥有审批权限</div>
            <el-table :data="empList" style="width: 100%">
              <el-table-column prop="job.jobName" label="员工职位" >
              </el-table-column>
              <el-table-column prop="empName" label="员工姓名" >
              </el-table-column>
            </el-table>
            <el-row style="margin-top:10px">
              <el-col :span="16">
                <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                               :current-page.sync="currPage" :page-size="pageSize"></el-pagination>
              </el-col>
            </el-row>
            <div style="margin-top: 20px;text-align: center">
              <el-button @click="saveApproval">申请审批</el-button>
            </div>
            <!--<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="emp in empList" :label="emp.empName" :key="emp.empName">{{emp.empName}}</el-checkbox>
            </el-checkbox-group>-->
          </el-dialog>
        </el-row>
        <el-row class="b-g-f p-10-20 border-style">
          <el-row>
            <div class="dialog__header">
              <span class="dialog__title">合同订单</span>
            </div>
          </el-row>
          <el-form :model="contract" ref="con" label-width="100px">
              <el-divider><span class="font-14-bold"></span></el-divider>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="主题:" prop="name" style="width: 918px">
                    <el-input v-model="contract.contractTheme" placeholder="关于合同的主题"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="对应客户:" style="width: 918px">
                    <el-input :disabled="true" v-model="contract.customerByCustomerId.customerName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="对应机会:" prop="opportunityByOppId">
                    <el-select :disabled="true" v-model="contract.opportunityByOppId" value-key="oppId" placeholder="未选" style="width: 817px">
                      <el-option v-for="item in opportunityList" :key="item.oppId" :label="item.oppTheme" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="合同订单号:" style="width: 395px">
                    <el-input v-model="contract.contractNo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同类型:">
                    <el-select placeholder="未选"  style="width: 290px" v-model="contract.contractSort">
                      <el-option v-for="(item,index) in lxOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="总金额:" style="width: 395px">
                    <el-input v-model="contract.contractTotalAmount"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="付款方式:">
                    <el-select placeholder="未选"  style="width: 290px" v-model="contract.contractPaymentMethods">
                      <el-option v-for="item in pays" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="下单时间:">
                    <el-date-picker  type="date" placeholder="选择日期" style="width: 296px" v-model="contract.contractStartTime" :disabled="true"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同结束时间:">
                    <el-date-picker  type="date" placeholder="选择日期" style="width: 290px" v-model="contract.contractEndTime"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="客户签约人:" style="width: 370px" prop="contractCustomerSigner">
                    <!--<el-input style="width: 290px" v-model="">
                    </el-input>-->
                    <el-select v-model="contract.contractCustomerSigner"  placeholder="未选" style="width: 290px">
                      <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!--<el-form-item label="我方签约人:" style="width: 370px">
                    <el-input style="width: 290px" v-model="contract.contractOurSigner">
                    </el-input>
                  </el-form-item>-->
                  <el-form-item label="我方签约人:" style="width: 370px" prop="employeeByEmpId.empName">
                    <el-input style="width: 290px" :disabled="changeEmp" v-model="contract.employeeByEmpId.empName" >
                      <el-button @click="openEmpDialog" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所有者:" style="width: 370px">
                    <el-input :disabled="true" style="width: 296px" placeholder="boss">
                     <!-- <el-button slot="append" icon="el-icon-search" ></el-button>-->
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结款方式:">
                    <el-select v-model="contract.contractMoneyMethods" placeholder="未选"  style="width: 290px">
                      <el-option v-for="item in paytimes" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="已回款金额:" style="width: 395px">
                    <el-input  :disabled="true" placeholder="￥0.00" v-model.number="contract.contractBackAmount"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="已开票金额:" style="width: 395px">
                    <el-input  :disabled="true" placeholder="￥0.00" v-model.number="contract.contractInvoiceAmount"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="margin-left: 56px;margin-bottom: 20px">
                  <span style="margin-right: 10px">状态:</span>
                  <el-radio-group v-model="contract.contractStatus">
                    <el-radio :label="1">未生效</el-radio>
                    <el-radio :label="2">执行中</el-radio>
                    <el-radio :label="3">结束</el-radio>
                    <el-radio :label="4">意外终止</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注:" style="width: 918px">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="contract.contractNote"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="正文及附件:" style="width: 918px">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="contract.contractBodyText"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            <!--订单明细-->
            <el-row>
              <el-col>
                <el-form-item label="订单明细:" style="width: 92%">
                  <el-row>
                    <el-col :span="4" :offset="12">
                      <span class="cursor" @click="openPro()"><i class="el-icon-edit"></i>编辑明细</span>
                    </el-col>
                    <el-col :span="4">
                      <span class="cursor" @click="printPdf(contract.contractId)"><i class="el-icon-printer"></i>打印单据</span>
                    </el-col>
                    <el-col :span="4">
                      <span class="cursor"><i class="el-icon-notebook-2"></i>导出word打印</span>
                    </el-col>
                  </el-row>
                </el-form-item>
                <div class="detail">
                  <el-table :data="detailList" style="width: 100%" border show-summary>
                    <el-table-column prop="productByProductId.productName" label="产品名" >
                    </el-table-column>
                    <el-table-column prop="productByProductId.productModel" label="型号" >
                    </el-table-column>
                    <el-table-column prop="productDetailCount" label="数量" >
                    </el-table-column>
                    <el-table-column prop="productDetailOutNum" label="已交付" >
                    </el-table-column>
                    <el-table-column  label="未交付" >
                      <template slot-scope="scope">
                        {{scope.row.productDetailCount - scope.row.productDetailOutNum }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="productDetailPrice" label="单价" >
                      <template slot-scope="scope">
                        ￥{{scope.row.productDetailPrice}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="productDetailMoney" label="金额" >
                      <template slot-scope="scope">
                        ￥{{ (scope.row.productDetailMoney = scope.row.productDetailPrice *scope.row.productDetailCount)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="productDetailRemarks" label="备注" >
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
            <!--出库情况-->
            <el-row>
              <el-col>
                <el-form-item label="出库情况:" style="width: 92%"></el-form-item>
                <div class="detail">
                  <el-table :data="storageList" style="width: 100%" border>
                    <el-table-column prop="storageTheme" label="主题" width="150">
                      <template slot-scope="scope">
                        <span>{{scope.row.storageTheme}}</span>
                        <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
                          <router-link :to="{path:'/storageview',query: {stoId: scope.row.storageId}}">
                            <span style="color: #333333"><i class="el-icon-caret-right"></i></span>
                          </router-link>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column prop="storageDate" label="填单时间" >
                      <template slot-scope="scope">
                        <span>{{scope.row.storageDate | formatDateJudge}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="storageExecutorDate" label="执行日期" >
                      <template slot-scope="scope">
                        <span>{{scope.row.storageExecutorDate | formatDateJudge}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="出库明细" width="500">
                      <template slot-scope="scope">
                        <el-table :data="scope.row.storageDetailsByStorageId" style="width: 100%" border show-summary>
                          <el-table-column type="index" label="序号" width="50">
                          </el-table-column>
                          <el-table-column prop="productByProductId.productName" label="产品名" >
                          </el-table-column>
                          <el-table-column prop="productByProductId.productModel" label="型号" >
                          </el-table-column>
                          <el-table-column prop="storageDetailNum" label="出库量" >
                          </el-table-column>
                          <el-table-column prop="storageDetailNote" label="备注" >
                          </el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column prop="employeeByStoEmployeeId.empName" label="填单人" ></el-table-column>
                    <el-table-column label="状态" >
                      <template slot-scope="scope">
                        <span v-if="scope.row.storageStatus === 1">未出库</span>
                        <span v-if="scope.row.storageStatus === 2">已出库</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="审批状态:" style="width: 91%">
                  <div v-if="this.contract.contractAppStatus === 0">
                    <span>待申请</span>
                    <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
                      <i class="el-icon-more font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.contract.contractAppStatus === 1">
                    <span>待审批</span>
                    <el-tooltip class="item" effect="dark" content="待审批" placement="bottom">
                      <i class="el-icon-s-opportunity font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.contract.contractAppStatus === 2">
                    <span>同意</span>
                    <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
                      <i class="el-icon-circle-check font-18"></i>
                    </el-tooltip>
                    <span>审批人：{{contract.employeeByAppEmpId.empName}}</span>
                  </div>
                  <div v-if="this.contract.contractAppStatus === 3">
                    <span>否决</span>
                    <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
                      <i class="el-icon-circle-close font-18"></i>
                      <span>审批人：{{contract.employeeByAppEmpId.empName}}</span>
                    </el-tooltip>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="审批记录:" style="width: 91%">
                  <el-row></el-row>
                  <el-row :key="index" v-for="(app,index) in approvalRecordList">
                    <div class="border-bo" >
                      <div class="font-13-bold">
                        <span>申请：</span>
                        <span class="margin-r-3">{{app.employeeByApplicantEmpId.empName}}<i class="el-icon-right"/> boss用户</span>
                        <span>{{app.approvalRecordDate}}</span>
                      </div>
                      <div class="font-13" v-if="app.employeeByApprovalEmpId !== null">
                        <span class="margin-r-3"><i class="el-icon-minus"/>{{app.employeeByApprovalEmpId.empName}}</span>
                        <span class="margin-r-3">{{app.approvalRecordTime | formatDate}}</span>
                        <span class="margin-r-3">{{app.approvalRecordOper}}</span>
                        <span>备注：{{app.approvalRecordNote}}</span>
                      </div>
                    </div>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="6">
                <el-form-item>
                 <span v-if="this.contract.contractAppStatus !== 2">
               <!-- <el-button type="danger" @click="repealCon">删除</el-button>-->
                  <el-button type="primary" @click="addContract">保存</el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                 </span>
                </el-form-item>
              </el-col>
            </el-row>
            </el-form>
          <!--内层dialog员工-->
          <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
            <div>
              <el-collapse v-model="activeName">
                <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                  <ul class="emp-ul">
                    <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                      <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                      <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                      <span class="">{{emp.empName}}</span>
                    </li>
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-dialog>
        </el-row>
        <!--回款计划/回款记录/开票记录-->
        <el-row type="flex" class="m-t-30">
          <el-col :span="11" class="m-b-20 ">
            <!--回款计划-->
            <el-row class="m-b-20 b-g-f border-style">
              <div class="p-10-20 f-w">
                <el-icon class="el-icon-chat-line-square"></el-icon>
                <span>回款计划</span>
                <el-tooltip class="item" effect="dark" content="新建" placement="bottom">
                <span @click="newBackPlan">
                  <el-icon class="el-icon-plus cursor" ></el-icon>
                </span>
                </el-tooltip>
              </div>
              <div class="p-10-20">
                <el-row :key="index" v-for="(pay,index) in planreceivableList" style="padding-bottom: 5px">
                  <el-icon class="el-icon-star-on"/>
                  <span @click="openBackView(pay.planreceivableId)" class="cursor margin-r-5">￥{{pay.planreceivableMoney}}</span>
                  <span v-if="pay.planreceivableIssue !== null" class="margin-r-5">第{{backPlanQcOptions[pay.planreceivableIssue-1].label}}期</span>
                  <span class="margin-r-5">{{pay.planreceivableDate}}</span>
                  <span v-if="pay.planreceivableBack !== null" class="margin-r-5">{{backPlanStaOptions[pay.planreceivableBack-1].label}}</span>
                  <span v-if="pay.planreceivableBack !== 2" @click="clickCreateReceivable(pay)" class="margin-r-5 cursor c-dl"><el-icon class="el-icon-right"/>回款</span>
                </el-row>
              </div>
            </el-row>
            <!--开票记录-->
            <el-row class="b-g-f border-style">
              <div class="p-10-20 f-w">
                <el-icon class="el-icon-chat-line-square"></el-icon>
                <span>开票记录</span>
                <el-tooltip class="item" effect="dark" content="新建" placement="bottom">
                <span @click="newRecordInvoice">
                  <el-icon class="el-icon-plus cursor" ></el-icon>
                </span>
                </el-tooltip>
              </div>
              <div class="p-10-20">
                <el-row :key="index" v-for="(pay,index) in RecordInvoiceList" style="padding-bottom: 5px">
                  <el-icon class="el-icon-star-on"/>
                  <span class="margin-r-5">{{pay.invoicerecordContent}}</span>
                  <span @click="openPayInvoice(pay)" class="cursor margin-r-5">￥{{pay.invoicerecordAmount}}</span>
                  <span v-if="pay.invoicerecordPeriods !== null" class="margin-r-5">第{{backInvoiceOptions[pay.invoicerecordPeriods-1].label}}期</span>
                  <span class="margin-r-5">{{pay.invoicerecordDate}}</span>
                  <span v-if="pay.invoicerecordPlanback === 1" @click="clickCreateBackPlan(pay)" class="margin-r-5 cursor c-dl"><el-icon class="el-icon-right"/>回款计划</span>
                </el-row>
              </div>
            </el-row>
          </el-col>
         <!-- 回款记录-->
          <el-col :offset="1" :span="12" class="m-b-20 b-g-f border-style">
            <div class="p-10-20 f-w ">
              <el-icon class="el-icon-document"></el-icon>
              <span>回款记录</span>
              <el-tooltip class="item" effect="dark" content="新建" placement="bottom">
                <span @click="newReceivableRecords">
                  <el-icon class="el-icon-plus cursor" ></el-icon>
                </span>
              </el-tooltip>
            </div>
            <div class="p-10-20">
              <el-row :key="index" v-for="(pay,index) in ReceivableRecordsList" style="padding-bottom: 5px">
                <el-icon class="el-icon-star-on"/>
                <span @click="openReceivableRecords(pay)" class="cursor margin-r-5">￥{{pay.collectionrecordAmount}}</span>
                <span v-if="pay.collectionrecordPeriods !== null" class="margin-r-5">第{{backRecordsOptions[pay.collectionrecordPeriods-1].label}}期</span>
                <span class="margin-r-5">{{pay.collectionrecordDate}}</span>
                <span v-if="pay.collectionrecordInvoiced === 1" @click="clickCreateBackInvoice(pay)" class="margin-r-5 cursor c-dl"><el-icon class="el-icon-right"/>开票</span>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-drawer title="编辑订单明细" size="60%":visible.sync="drawer"
                 :direction="'rtl'" @close="closeDrawer"  style="font-size:20px">
        <div class="m-l-20 font-18">
          <div class="m-b-10"><span>产品列表</span></div>
          <el-tree :data="proList" @node-click="clickPro" class="m-b-20"
                   node-key="productClassifyId" ref="tree" highlight-current :props="defaultProps">
          </el-tree>
        </div>
        <div class="m-l-20 w-95 font-16">
          <div class="m-b-10"><span>明细表格</span></div>
          <div class="detail">
            <el-table :data="editDetailList" style="width: 100%" border show-summary>
              <el-table-column prop="productByProductId.productName" label="产品名" >
              </el-table-column>
              <el-table-column prop="productByProductId.productModel" label="型号" >
              </el-table-column>
              <el-table-column label="数量" width="150">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.productDetailCount" :min="1" :max="1000" size="mini"></el-input-number>
                  <span style="display: none">{{scope.row.productDetailOutNum = scope.row.productDetailCount}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="productDetailPrice" label="单价" >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.productDetailPrice" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="productDetailMoney" label="金额" >
                <template slot-scope="scope">
                  {{ (scope.row.productDetailMoney = scope.row.productDetailPrice *scope.row.productDetailCount)}}
                </template>
              </el-table-column>
              <el-table-column label="备注" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.productDetailRemarks" size="small">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" width="70">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                    <el-button size="mini" @click="deleteDetail(scope.row)"
                               icon="el-icon-delete" type="danger" circle></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-row>
          <el-col class="m-t-20 m-l-20">
            <el-button @click="saveContractDetail"  type="primary">确认</el-button>
            <el-button @click="drawer = false">取消</el-button>
          </el-col>
        </el-row>
      </el-drawer>
    </el-row>
    <el-row>
      <!--交付计划dialog-->
      <!--<el-dialog title="交付计划/订单明细" :visible.sync="dialog1" width="60%" style="color: #333333"  >
        <el-form  label-width="100px" :rules="rules">
          <hr style="margin-top: -20px;margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品名称:" prop="name" style="width: 830px">
                <el-input  placeholder="产品名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应客户:" style="width: 830px">
                <el-input></el-input>
              </el-form-item>
              <div class="form-inline">
                <el-input size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                <el-button size="medium" icon="el-icon-search"></el-button>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单:">
                <el-select placeholder="未选" style="width: 730px" ></el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单数量:" style="width: 395px">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单价:" style="width: 395px">
                <el-input ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="型号/类型:" style="width: 395px">
                <el-input ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额:" style="width: 395px">
                <el-input :disabled="true" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划交付日期:" style="width: 395px">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 296px"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="已交付:" style="width: 395px">
                <el-input :disabled="true" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所有者:" style="width: 370px">
                <el-input style="width: 296px">
                  <el-button slot="append" icon="el-icon-search" ></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期次:">
                <el-select placeholder="未选">
                  <el-option
                    v-for="item in periods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="要求:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="交付条件:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-left: 56px;margin-bottom: 20px">
              <span style="padding-right: 10px">状态:</span>
              <el-radio-group v-model="radio">
                <el-radio :label="1">提醒</el-radio>
                <el-radio :label="2">不提醒</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary">保存</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>-->
      <!--回款计划dialog-->
      <el-dialog title="回款计划" :visible.sync="dialog2" width="60%" style="color: #333333"
                 @close="closeDialogBackPlan">
        <el-form  label-width="100px" ref="backPlan" :model="planreceivable" :rules="backPlanRules">
          <hr style="margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="(供应商)客户:" style="width: 830px">
                <el-input :disabled="true" v-model="planreceivable.customerByCustomerId.customerName"></el-input>
              </el-form-item>
            <!--  <div class="form-inline">
                <el-input size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                <el-button size="medium" icon="el-icon-search"></el-button>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>-->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单:" style="width: 830px">
                <el-input :disabled="true" v-model="planreceivable.contractByContractId.contractTheme"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划回款日:" style="width: 395px" prop="planreceivableDate">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 296px" v-model="planreceivable.planreceivableDate"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期次:" prop="planreceivableIssue">
                <el-select  placeholder="未选"  style="width: 290px" v-model="planreceivable.planreceivableIssue">
                  <el-option v-for="item in periods" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="金额:" style="width: 395px" prop="planreceivableMoney">
                <el-input v-model="planreceivable.planreceivableMoney"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人:" style="width: 370px">
                <el-input style="width: 292px" :disabled="true" v-model="planreceivable.employeeByEmpId.empName">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所有者:">
                <el-input style="width: 730px" :disabled="true" placeholder="boss">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-left: 30px;margin-bottom: 20px">
              <span style="margin-right: 10px">是否回款:</span>
              <el-radio-group v-model="backradio">
                <el-radio :label="1">已回</el-radio>
                <el-radio :label="2">未回</el-radio>
                <el-radio :label="3">不提醒</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="planreceivable.planreceivableNote"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary" @click="addPayBackJudge">保存</el-button>
                <el-button @click="dialog2= false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!--交付记录dialog-->
       <!--<el-dialog title="交付记录" :visible.sync="dialog3" width="60%" style="color: #333333"  >
       <el-form label-width="100px" :rules="rules">
         <hr style="margin-top: -20px;margin-bottom: 15px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="对应客户:" style="width: 830px">
               <el-input></el-input>
             </el-form-item>
             <div class="form-inline">
               <el-input size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
               <el-button size="medium" icon="el-icon-search"></el-button>
               <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                 <el-button size="medium" icon="el-icon-s-operation"></el-button>
               </el-tooltip>
             </div>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="合同订单:">
               <el-select placeholder="未选" style="width: 730px" ></el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="产品名称:" style="width: 370px">
               <el-input style="width: 296px">
                 <el-button slot="append" icon="el-icon-search" ></el-button>
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="单价:" style="width: 370px">
               <el-input style="width: 296px"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="交付数量:" style="width: 395px">
               <el-input></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="交付日期:" style="width: 395px">
               <el-date-picker  type="date" placeholder="选择日期" style="width: 296px"></el-date-picker>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="对方接收人:" style="width: 395px">
               <el-input></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="金额:" style="width: 395px">
               <el-input :disabled="true" ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="备注:" style="width: 395px">
               <el-input></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="单个成本:" style="width: 395px">
               <el-input></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12" :offset="6">
             <el-form-item>
               <el-button type="primary">保存</el-button>
               <el-button >取消</el-button>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </el-dialog>-->
      <!--回款记录dialog-->
      <el-dialog title="回款记录" :visible.sync="dialog4" width="60%" style="color: #333333" @close="closeDialogBackRecords">
        <el-form :model="collectionrecords" label-width="100px" :rules="backRecordsRules" ref="backRecords">
          <hr style="margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="(供应商)客户:" style="width: 830px">
                <el-input :disabled="true" v-model="collectionrecords.customerByCustomerId.customerName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单:">
                <el-input :disabled="true" v-model="collectionrecords.contractByContractId.contractTheme"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="期次:">
                <el-select  placeholder="未选"  style="width: 290px" :disabled="true" v-model="collectionrecords.collectionrecordPeriods">
                  <el-option
                    v-for="item in backRecordsOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期:">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 290px" v-model="collectionrecords.collectionrecordDate"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="金额:" style="width: 395px">
                <el-input :disabled="true" v-model="collectionrecords.collectionrecordAmount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款方式:" prop="collectionrecordPaystyle">
                <el-select v-model="collectionrecords.collectionrecordPaystyle" placeholder="未选"  style="width: 290px">
                  <el-option
                    v-for="item in payStyleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人:" style="width: 370px">
                <el-input style="width: 296px" :disabled="true" v-model="collectionrecords.employeeByEmpId.empName">
                 <!-- <el-button slot="append" icon="el-icon-search" ></el-button>-->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:" prop="collectionrecordSort">
                <el-select placeholder="未选"  style="width: 290px" v-model="collectionrecords.collectionrecordSort">
                  <el-option
                    v-for="item in sortOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应退货单:" style="width: 830px">
                <el-input :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-left: 30px;margin-bottom: 20px">
              <span style="margin-right: 10px">已开发票:</span>
              <el-radio-group v-model="collectionrecords.collectionrecordInvoiced">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
                <el-radio :label="3">无需开票</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"  v-model="collectionrecords.collectionrecordNote"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary" @click="addBackRecords">保存</el-button>
                <el-button @click="dialog4 = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!--开票记录dialog-->
      <el-dialog title="开票记录" :visible.sync="dialog5" width="60%" style="color: #333333"  @close="closeDialogBackInvoice">
        <el-form label-width="100px"  :model="RecordInvoice" ref="invoice" :rules="invoiceRules">
          <hr style="margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="(供应商)客户:" style="width: 830px">
                <el-input :disabled="true" v-model="RecordInvoice.customerByCustomerId.customerName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单:" style="width: 830px">
                <el-input :disabled="true" v-model="RecordInvoice.contractByContractId.contractTheme"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开票内容:" style="width: 395px" prop="invoicerecordContent">
                <el-input v-model="RecordInvoice.invoicerecordContent"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="票据类型:" prop="invoicerecordType">
                <el-select v-model="RecordInvoice.invoicerecordType" placeholder="未选"  style="width: 290px">
                  <el-option
                    v-for="item in invoicetypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="票据金额:" style="width: 395px">
                <el-input v-model="RecordInvoice.invoicerecordAmount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票号码:" style="width: 370px">
                <el-input style="width: 292px" :disabled="true" v-model="RecordInvoice.invoicerecordNo" placeholder="自动随机生成">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开票日期:" style="width: 395px">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 296px" v-model="RecordInvoice.invoicerecordDate"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期次:">
                <el-select v-model="RecordInvoice.invoicerecordPeriods" placeholder="未选"  style="width: 290px">
                  <el-option
                    v-for="item in backInvoiceOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经手人:" style="width: 830px">
                <el-input :disabled="true" v-model="RecordInvoice.employeeByEmpId.empName">
                 <!-- <el-button slot="append" icon="el-icon-search" ></el-button>-->
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否回款:">
                <el-select v-model="RecordInvoice.invoicerecordBack" placeholder="未选"  style="width: 290px">
                  <el-option
                    v-for="item in whetherbackOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回款计划:">
                <el-select v-model="RecordInvoice.invoicerecordPlanback" placeholder="未选"  style="width: 290px">
                  <el-option
                    v-for="item in backPlanOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="RecordInvoice.invoicerecordNote"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary" @click="addBackInvoiceJudge">保存</el-button>
                <el-button @click="dialog5 = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from "../assets/format";

  export default {
  data () {
    return {
      changeEmp:true, // 是否可以改变负责人
      activeName: [],
      innerDialogEmp: false,// 内层dialog员工
      deptList:[],
      storageList:[],
      opportunityList: [],//销售机会集合
      detailList: [],//明细集合
      customerList: [], // 员工客户名称
      drawer: false, //抽屉
      editDetailList: [],//明细操作集合
      pageSize: 2, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      cusPageSize: 2, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      innerDialog: false,// bossDialog
      proList:[],// 所有商品
      active: 0, //审批步骤初始值
      empList:[],// 所有Boss用户
      pro:{},
      contractRadio:1,
      planreceivableList:[],
      ReceivableRecordsList:[],
      RecordInvoiceList:[],
      backPlanRules:{
        planreceivableDate:[
          { required: true, message: '请选择日期', trigger: 'change'  },
        ],
        planreceivableIssue:[
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        planreceivableMoney:[
          { required: true, message: '请填写', trigger: 'change' },
        ],
      },
      backRecordsRules:{
        collectionrecordPaystyle: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        collectionrecordSort:[
          { required: true, message: '请选择', trigger: 'blur'},
        ]
      },
      invoiceRules:{
        invoicerecordContent: [
          { required: true, message: '请填写', trigger: 'blur' },
        ],
        invoicerecordType:[
          { required: true, message: '请选择', trigger: 'blur'},
        ]
      },
      periods: [{
        value: 1,
        label: '1'
      }, {
        value: 2,
        label: '2'
      }, {
        value: 3,
        label: '3'
      }, {
        value: 4,
        label: '4'
      }, {
        value: 5,
        label: '5'
      }, {
        value: 6,
        label: '6'
      }],
      backPlanQcOptions: [{
        value: 1,
        label: '1',
        disabled:false
      }, {
        value: 2,
        label: '2',
        disabled:false
      }, {
        value: 3,
        label: '3',
        disabled:false
      }, {
        value: 4,
        label: '4',
        disabled:false
      }, {
        value: 5,
        label: '5',
        disabled:false
      }, {
        value: 6,
        label: '6',
        disabled:false
      },{
        value: 7,
        label: '7',
        disabled:false
      }, {
        value: 8,
        label: '8',
        disabled:false
      }, {
        value: 9,
        label: '9',
        disabled:false
      }, {
        value: 10,
        label: '10',
        disabled:false
      }, {
        value: 11,
        label: '11',
        disabled:false
      }, {
        value: 12,
        label: '12',
        disabled:false
      }],
      backPlanStaOptions: [{
        value: 1,
        label: '未回'
      }, {
        value: 2,
        label: '已回'
      }, {
        value: 3,
        label: '不提醒'
      }],
      backRecordsOptions: [{
        value: 1,
        label: '1',
        disabled:false
      }, {
        value: 2,
        label: '2',
        disabled:false
      }, {
        value: 3,
        label: '3',
        disabled:false
      }, {
        value: 4,
        label: '4',
        disabled:false
      }, {
        value: 5,
        label: '5',
        disabled:false
      }, {
        value: 6,
        label: '6',
        disabled:false
      },{
        value: 7,
        label: '7',
        disabled:false
      }, {
        value: 8,
        label: '8',
        disabled:false
      }, {
        value: 9,
        label: '9',
        disabled:false
      }, {
        value: 10,
        label: '10',
        disabled:false
      }, {
        value: 11,
        label: '11',
        disabled:false
      }, {
        value: 12,
        label: '12',
        disabled:false
      }],
      //付款方式
      payStyleOptions: [{
        value: 1,
        label: '微信'
      }, {
        value: 2,
        label: '支付宝'
      }, {
        value: 3,
        label: '现金'
      }, {
        value: 4,
        label: '网上银行'
      }, {
        value: 5,
        label: '其他'
      }],
      //分类
      sortOptions: [{
        value: 1,
        label: '新客户付款'
      }, {
        value: 2,
        label: '老客户付款'
      }, {
        value: 3,
        label: '押金'
      }, {
        value: 4,
        label: '贷款'
      }, {
        value: 5,
        label: '服务费'
      }],
      invoicetypeOptions: [{
        value: 1,
        label: '增值'
      }, {
        value: 2,
        label: '普通国税'
      }, {
        value: 3,
        label: '普通地税'
      }, {
        value: 4,
        label: '收据'
      }],
      whetherbackOptions: [{
        value: 1,
        label: '未回款'
      }, {
        value: 2,
        label: '已回款'
      }],
      backPlanOptions: [{
        value: 1,
        label: '未制定回款计划'
      }, {
        value: 2,
        label: '已制定回款计划'
      }, {
        value: 3,
        label: '已回款无须计划'
      }],
      // 撤销审批对象
      approval:{
        approvalId:0,
        approvalTheme:'',
        approvalStay:'',
        approvalStatus: '',
        approvalClassify:'',
        approvalOperation:'',
        approvalContent:'',
        approvalDate:'',
        approvalTime:'',
        contractByContractId:'',
        employeeByApplicantEmpId:'',
        employeeByApprovalEmpId:null
      },
      approvalRecordList:[],// 审批记录集合
      // 审批记录
      approvalRecord:{
        approvalRecordId:0,
        approvalRecordTime:'',
        approvalRecordOper:'',
        approvalRecordNote:'',
        approvalRecordDate:'',
        contractByContractId:'',
        employeeByApplicantEmpId:'',
        employeeByApprovalEmpId:null
      },
      editDetail:{
        productByProductId:'',
        purchaseByPurchaseId:{},
        productDetailCount: 1,
        // productDetailOutNum:0,
        productDetailPrice:0,
        productDetailMoney: 0,
        productDetailRemarks: ''
      },
      editDetailList: [],//明细操作集合
      // 树形结构label，children
      defaultProps: {
        label: 'productClassifyName',
        children:'children'
      },
    /*  dialog1: false,*/
      dialog2: false,
     /* dialog3: false,*/
      dialog4: false,
      dialog5: false,
      contract: {
        contractId: 0,//合同id
        contractTheme: '', //主题
        opportunityByOppId:'',//销售机会
        customerByCustomerId: '',//对应客户
        contractChance:'',//对应机会
        contractNo:'',  //合同订单号
        contractSort:'',//分类
        contractTotalAmount:0,  //总金额
        contractPaymentMethods:'', //付款方式
        contractStartTime:'',  //下单时间
        contractEndTime:'', //结束时间
        contractCustomerSigner:'',//客户签约人
        contractOurSigner:'', //我方签约人
        contractEmpName:'',  //所有者
        contractBackAmount:0,//已回款金额
        contractInvoiceAmount:0,//已开票金额
        contractMoneyMethods:'',  //结款方式
        contractStatus: '', //状态
        contractBodyText:'',  //合同正文及附件
        contractNote:'',//备注
        contractByContractId:'',
        customerByCustomerId:{},
        employeeByEmpId: '',
        contractAppStatus: 0,
        employeeByAppEmpId:null
      },
      planreceivable: {
        employeeByEmpId:'',//所有者(负责人)
        planreceivableId:0,
        planreceivableDate:'',//回款日期
        planreceivableNote:'',//备注
        planreceivableBack:'',//是否回款
        planreceivableIssue:1,//期次
        planreceivableMoney:'0.0',//金额
        planreceivableEmpName:'',//所有者
        planreceivablePrincipal:'',//负责人
        customerByCustomerId:'',//客户
        contractByContractId:''//合同订单
      },
      collectionrecords: {
        collectionrecordId:0,
        collectionrecordPeriods:1,
        collectionrecordDate:'',
        collectionrecordAmount:0.00,
        collectionrecordPaystyle:'',
        collectionrecordSort:'',
        collectionrecordInvoiced:1,
        collectionrecordNote:'',
        collectionrecordCustomerName:'',
        collectionrecordEmpName:'',
        collectionrecordReturnlist:'',
        contractByContractId:'',//合同
        employeeByEmpId:'',//员工
        customerByCustomerId:'',//客户
        planreceivableByPlanreceivableId:''
      },
      RecordInvoice: {
        invoicerecordId:0,
        invoicerecordContent:'',
        invoicerecordType:'',
        invoicerecordAmount:0.00,
        invoicerecordNo:'',
        invoicerecordDate:'',
        invoicerecordPeriods:1,
        invoicerecordHandlers:'',
        invoicerecordBack:'',
        invoicerecordPlanback:'',
        invoicerecordNote:'',
        invoicerecordCustomerName:'',
        contractByContractId:'',
        employeeByEmpId:'',
        customerByCustomerId:''
      },
      backradio: 2,//状态回传会出问题 查看视图不会 一般不在视图里修改状态
      contactList: [], // 员工联系人集合
      /*弹出框的分类*/
      lxOptions: [{
        value: 1,
        label: '产品销售'
      }, {
        value: 2,
        label: '服务'
      }, {
        value: 3,
        label: '业务合作'
      }, {
        value: 4,
        label: '代理分销'
      }, {
        value: 5,
        label: '其他'
      }],
      //分类下拉框值
      sortvalue:'',
      /*弹出框的付款方式*/
      pays: [{
        value: 1,
        label: '微信'
      }, {
        value: 2,
        label: '支付宝'
      }, {
        value: 3,
        label: '现金'
      }, {
        value: 4,
        label: '网上银行'
      }, {
        value: 5,
        label: '其他'
      }],
      //付款方式下拉框值
      payvalue:'',
      /*弹出框的付款方式*/
      paytimes: [{
        value: 1,
        label: '现款现结'
      }, {
        value: 2,
        label: '货到付款'
      }, {
        value: 3,
        label: '先款后货'
      }, {
        value: 4,
        label: '账期收款'
      }, {
        value: 5,
        label: '月结'
      },{
        value: 6,
        label: '季结'
      },{
        value: 7,
        label: '年结'
      }],
      jhValue: '',
      backInvoiceOptions: [{
        value: 1,
        label: '1'
      }, {
        value: 2,
        label: '2'
      }, {
        value: 3,
        label: '3'
      }, {
        value: 4,
        label: '4'
      }, {
        value: 5,
        label: '5'
      }, {
        value: 6,
        label: '6'
      },{
        value: 7,
        label: '7'
      }, {
        value: 8,
        label: '8'
      }, {
        value: 9,
        label: '9'
      }, {
        value: 10,
        label: '10'
      }, {
        value: 11,
        label: '11'
      }, {
        value: 12,
        label: '12'
      }],
     /* ztOptions: [{
        value: 1,
        label: '执行中'
      }, {
        value: 2,
        label: '结束'
      }, {
        value: 3,
        label: '意外终止'
      }],*/
      //自适应文本域
      textarea1:'',
      textarea2:'',
      dialogFormVisible: false,
      totalSize: 0,
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,
      whetherbackvalue:''
    }
  },
  methods: {
    //客户分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer(val){
      if (this.dialogFormVisible === true){
        this.contract.customerByCustomerId = val
        this.contract.opportunityByOppId = ''
        console.log(this.contract.customerByCustomerId)
        this.choiceContact(val.customerId)
        this.opportunityData(val.customerId)
      }else if(this.dialogCopy === true){
        this.copyForm.customer = val
      }
      this.innerDialog = false;
    },
    choiceEmp(val) {
      this.contract.employeeByEmpId = val
      this.innerDialogEmp = false;
    },
    //关闭员工diglog事件
    closeInnerDialogEmp(){
      this.activeName = []
    },
    //查询部门员工
    findDeptList () {
      this.$axios.get('http://localhost:8088/dept-emp-list')
        .then(v => {
          this.deptList = v.data
          for(let i = 1;i <= this.deptList.length;i++){
            this.activeName.push(i)
          }
        })
        .catch(function (v) {})
    },
    //打开员工dialog
    openEmpDialog(){
      this.innerDialogEmp = true
      this.findDeptList()
    },
    // 导出PDF
    printPdf(val){
      this.$router.push({path: '/printcontract', query: {contractId: val}});
    },
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    initData () {
      let contractId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/emp-contract-id', {
        params: {
          contractId : contractId
        }
      })
        .then(v => {
          this.contract = v.data
          console.log(v.data)
          console.log('当前合同订单审批状态')
          if(this.contract.contractAppStatus === 0){
            this.active = 0
          }else if (this.contract.contractAppStatus === 1){
            this.active = 1
          }else if (this.contract.contractAppStatus === 2){
            this.active = 3
          }else if (this.contract.contractAppStatus === 3){
            this.active = 2
          }
          this.choiceContact()
          this.opportunityData()
        })
        .catch(function (v) {})
    },
    // 查询所有boss
    //关闭抽屉
    closeDrawer(){
      this.contract.contractAmount = this.contractPrice
    },
    saveContractDetail(){
      this.drawer = false
      this.contract.contractAmount = this.contractPrice
      this.addContract()
    },
    findAllEmp(currPage,pageSize){
      this.innerDialog = true
      this.$axios.get('http://localhost:8088/emp-boss-list',{params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.empList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    //boss分页
    changePage (val) {
      // val就是当前页码
      this.findAllEmp(val, this.pageSize)
    },
    //打开选择产品抽屉
    openPro() {
      if (this.contract.contractAppStatus === 2) {
        this.$message({
          message: '该采购单审核通过，不可编辑明细',
          type: 'warning'
        });
      } else {
        this.drawer = true
        this.findProduct()
        this.editDetailList = this.detailList
      }
    },
    // 查询所有产品
    findProduct(){
      this.$axios.get('http://localhost:8088/pro-classify-list')
        .then(v => {
          this.proList = v.data
          console.log(v.data)
        })
        .catch(function (v) {})
    },
    // 查询合同订单待审批表
    findApproval(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/app-con', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          if (v.data.length !== 0 ){
            this.approval = v.data
            console.log('待审批表ID')
            console.log(this.approval.approvalId)
          }
        })
        .catch(function (v) {})
    },
    // 查询合同订单处于待审批状态的审批记录
    findAppRecordBy(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/app-record-con-app', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          if (v.data.length !== 0 ){
            this.approvalRecord = v.data
            console.log('待审批状态的审批记录ID')
            console.log(this.approvalRecord)
          }
        })
        .catch(function (v) {})
    },
    // 查询合同订单审批记录表
    findAppRecord(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/app-record-con-list', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          this.approvalRecordList = v.data
          console.log('审批记录集合')
          console.log(this.approvalRecordList)
        })
        .catch(function (v) {})
    },
    // 点击选择产品
    clickPro(d,v,e){
      if(d.children.length == 0){
        this.$axios.get('http://localhost:8088/pro-id', {
          params: {
            proId : d.productClassifyId
          }
        })
          .then(v => {
            this.pro = v.data
            if (this.editDetailList.length ===0){
              this.addDetailList()
            }else {
              console.log(this.isDetailList())
              if (this.isDetailList() === true){
                this.$message('您添加的产品在列表中已经存在了！');
              }else {
                this.addDetailList()
              }
            }
          })
          .catch(function (v) {})
      }
    },
    // 将选择产品放过编辑明细集合
    addDetailList(){
     /* this.editDetail.productByProductId = this.pro.productsByProductClassifyId[0]
      this.editDetail.productDetailName = this.pro.productsByProductClassifyId[0].productName
      this.editDetail.productDetailModel = this.pro.productsByProductClassifyId[0].productModel
      this.editDetail.productDetailPrice = this.pro.productsByProductClassifyId[0].productPrice*/
      this.editDetail.productByProductId = this.pro.productsByProductClassifyId[0]
      this.editDetail.productDetailPrice = this.pro.productsByProductClassifyId[0].productPrice
      this.editDetailList.push(this.editDetail)
      this.editDetail = {
        productByProductId:'',
        contractByContractId:{},
        productDetailCount: 1,
        // productDetailOutNum:0,
        // productDetailIntoNum:0,
        productDetailPrice:0,
        productDetailMoney: 0,
        productDetailRemarks: ''
      }
    },
    // 判断所选商品是否重复
    isDetailList(){
      let num = 0
      this.editDetailList.forEach(v=>{
        if (v.productByProductId.productId == this.pro.productsByProductClassifyId[0].productId){
          console.log("重复")
          num = 1;
        }
      })
      if (num == 1){
        return true
      }else {
        return false
      }
    },
    // 从详单删除商品
    deleteDetail(val){
      let index=0;
      for(let i = 0; i < this.editDetailList.length; i++){
        if(this.editDetailList[i].productByProductId.productId === val.productByProductId.productId){
          index = i;
          break;
        }
      }
      this.editDetailList.splice(index,1)
    },
    // 确认详单，关掉抽屉
    confirmProList(){
      this.drawer = false
      this.detailList = this.editDetailList
      // this.quotation.quotationPrice = this.quotationPrice
    },
    // 查询所有详单
    findDetail(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/con-detail-list', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          this.detailList = v.data
          this.editDetailList = this.detailList
          console.log(v.data)
        })
        .catch(function (v) {})
    },
    // 修改
    addContract () {
      // 状态
      if(this.contract.contractTotalAmount == this.contract.contractBackAmount){
        this.contract.contractStatus = 3
      }
      this.contract.contractStatus = this.contractRadio
      this.contract.contractStartTime= this.addDate()
      console.log('修改详单集合')
      console.log(this.detailList)
      this.$refs.con.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-contract',
            {
              contractId:this.contract.contractId,
              contractTheme:this.contract.contractTheme,
              contractChance:this.contract.contractChance,
              contractNo:this.contract.contractNo,
              contractSort:this.contract.contractSort,
              contractTotalAmount:this.contract.contractTotalAmount,
              contractPaymentMethods:this.contract.contractPaymentMethods,
              contractStartTime:this.contract.contractStartTime,
              contractEndTime:this.contract.contractEndTime,
              contractCustomerSigner:this.contract.contractCustomerSigner,
              contractOurSigner:this.contract.contractOurSigner,
              contractEmpName:this.contract.contractEmpName,
              contractBackAmount:this.contract.contractBackAmount,
              contractMoneyMethods:this.contract.contractMoneyMethods,
              contractStatus:this.contract.contractStatus,
              contractBodyText:this.contract.contractBodyText,
              contractNote:this.contract.contractNote,
              contractInvoiceAmount:this.contract.contractInvoiceAmount,
              contractByContractId:this.contract.contractByContractId,
              employeeByEmpId: this.contract.employeeByEmpId,
              customerByCustomerId:this.contract.customerByCustomerId,
              opportunity: this.contract.opportunityByOppId,
              details:this.detailList,
              contractAppStatus: this.contract.contractAppStatus,
              employeeByAppEmpId: this.contract.employeeByAppEmpId
            })
            .then(v => {
              // 1、刷新数据
              this.initData()
              this.findDetail()
              this.findApproval()
              this.findAppRecord()
              this.findAppRecordBy()
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 申请审批
    saveApproval(){
      //新增审批记录表
      this.approvalRecord.employeeByApplicantEmpId = this.emp
      this.approvalRecord.approvalRecordDate = this.addDate()
      this.approvalRecord.contractByContractId = this.contract
      this.saveAppRecord()
      //新增审批表 审批状态1 1待审批 2同意 3否决 4撤销
      this.approval.approvalTheme = this.contract.contractTheme
      this.approval.approvalContent = '合同订单记录'
      this.approval.approvalStatus = 1
      this.approval.approvalDate = this.addDate()
      this.approval.approvalClassify = 3
      this.approval.employeeByApplicantEmpId = this.emp
      this.approval.contractByContractId = this.contract
      this.saveApp()
      this.$message({
        message: '申请成功',
        type: 'success'
      })
      //修改报价单 审批状态为待审批 0待申请 1待审批 2同意 3否决
      this.contract.contractAppStatus = 1
      this.addContract ()
    },
    //撤销审批提示
    repealApp(){
      this.$confirm('此操作将撤销审批, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateApproval()
        this.$message({
          type: 'success',
          message: '撤销成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消撤销'
        })
      })
    },
    //撤销审批
    updateApproval(){
      //修改审批记录表
      this.approvalRecord.approvalRecordTime = '1'
      this.approvalRecord.approvalRecordOper = '撤销'
      this.approvalRecord.employeeByApprovalEmpId = this.emp
      this.saveAppRecord()
      //修改审批表 审批状态1 1待审批 2同意 3否决 4撤销 5重审
      this.approval.approvalStatus = 4
      this.saveApp()
      this.$message({
        message: '撤销成功',
        type: 'success'
      })
      //修改报价单 审批状态为待申请  0待申请 1待审批 2同意 3否决
      this.contract.contractAppStatus = 0
      this.addContract ()
    },
    // 审批axois
    saveApp(){
      console.log(this.approval.approvalId)
      this.$axios.post('http://localhost:8088/save-approval',
        {
          approvalId:this.approval.approvalId,
          approvalContent:this.approval.approvalContent,
          approvalTheme:this.approval.approvalTheme,
          approvalStay:this.approval.approvalStay,
          approvalStatus: this.approval.approvalStatus,
          approvalClassify:this.approval.approvalClassify,
          approvalOperation:this.approval.approvalOperation,
          approvalDate:this.approval.approvalDate,
          approvalTime:this.approval.approvalTime,
          employeeByApplicantEmpId:this.approval.employeeByApplicantEmpId,
          employeeByApprovalEmpId:this.approval.employeeByApprovalEmpId,
          contractByContractId:this.approval.contractByContractId
        })
        .then(v => {
          this.innerDialog = false
          this.approval = {
            approvalId:0,
            approvalTheme:'',
            approvalStay:'',
            approvalStatus: 0,
            approvalClassify:0,
            approvalOperation:'',
            approvalDate:'',
            approvalTime:'',
            contractByContractId:'',
            employeeByApplicantEmpId:'',
            employeeByApprovalEmpId:null
          }
        })
        .catch(function (v) {})
    },
    // 审批记录axois
    saveAppRecord(){
      this.$axios.post('http://localhost:8088/save-app-record',
        {
          approvalRecordId:this.approvalRecord.approvalRecordId,
          approvalRecordOper:this.approvalRecord.approvalRecordOper,
          approvalRecordNote:this.approvalRecord.approvalRecordNote,
          employeeByApprovalEmpId:this.approvalRecord.employeeByApprovalEmpId,
          employeeByApplicantEmpId:this.approvalRecord.employeeByApplicantEmpId,
          approvalRecordDate:this.approvalRecord.approvalRecordDate,
          approvalRecordTime:this.approvalRecord.approvalRecordTime,
          contractByContractId: this.approvalRecord.contractByContractId
        })
        .then(v => {
          this.approvalRecord = {
            approvalRecordId:0,
            approvalRecordTime:'',
            approvalRecordOper:'',
            approvalRecordNote:'',
            employeeByApplicantEmpId:'',
            employeeByApprovalEmpId:null,
            approvalRecordDate:'',
            contractByContractId:''
          }
        })
        .catch(function (v) {})
    },
    // 查询客户所有机会
    opportunityData () {
      this.$axios.get('http://localhost:8088/cus-opp-list-all', {
        params:{
          cusId : this.contract.customerByCustomerId.customerId
        }
      })
        .then(v => {
          this.opportunityList = v.data
        })
        .catch(function (v) {})
    },
     /* this.$axios.post('http://localhost:8088/save-contract',this.contract)
        .then(v => {
          this.initData()
          this.$message({
            message: '保存成功！',
            type: 'success'
          });
        })
        .catch(function (v) {})
    },*/
    repealContract () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteContract()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除
    deleteContract () {
      let conId = this.$route.query.contractId
      this.$axios.post('http://localhost:8088/delete-contract', this.qs.stringify({conId: conId}))
        .then(v => {
          this.$router.push('/contract');
        })
        .catch(function (v) {})
    },
    // 选择联系人
    choiceContact(){
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : this.contract.customerByCustomerId.customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
    },
    //获取当前日期
    addDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    //新建回款计划
    newBackPlan(){
      if(this.contract.contractAppStatus != 2){
        this.$message({
          type: 'info',
          message: '请先完成合同订单审批。'
        })
      }else {
        this.dialog2 = true
        this.planreceivable.customerByCustomerId = this.contract.customerByCustomerId
        this.planreceivable.planreceivableDate = this.addDate()
        this.planreceivable.contractByContractId = this.contract
        this.planreceivable.employeeByEmpId = this.contract.employeeByEmpId
        this.planreceivable.planreceivableBack = 1
      }
    },
   /* //打开回款计划dialog事件
    openDialogBackPlan(){
      this.planreceivable.contractByContractId = this.contract
      this.planreceivable.employeeByEmpId = this.emp
      this.planreceivable.customerByCustomerId = this.contract.customerByCustomerId
      this.planreceivable.planreceivableEmpName = this.contract.employeeByEmpId.empName
    },*/
    closeDialogBackPlan(){
        this.$refs.backPlan.resetFields()
        this.planreceivable = {
          employeeByEmpId:'',//所有者(负责人)
          planreceivableId:0,
          planreceivableDate:'',//回款日期
          planreceivableNote:'',//备注
          planreceivableBack:'',//是否回款
          planreceivableIssue:0,//期次
          planreceivableMoney:'0.0',//金额
          planreceivableEmpName:'',//所有者
          planreceivablePrincipal:'',//负责人
          customerByCustomerId:'',//客户
          contractByContractId:''//合同订单
        }
    },
    //新增回款计划判断
    addPayBackJudge(){
      if (this.planreceivable.planreceivableId === 0){
        this.$refs.backPlan.validate((valid) => {
          if (valid) {
            if (this.RecordInvoice.invoicerecordId !== 0){
              // 修改采购发票为已建立回款计划
              this.RecordInvoice.invoicerecordPlanback = 2
              this.$axios.post('http://localhost:8088/save-invoicerecord',this.RecordInvoice)
                .then(v => {
                  this.findBackInvoice()
                })
                .catch(function (v) {
                })
            }
            this.addPayBack()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }else {
        this.$refs.backPlan.validate((valid) => {
          if (valid) {
            this.addPayBack()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    //新增、修改回款计划
    addPayBack(){
      if(this.planreceivable.customerByConCustomerId == ''){
          this.planreceivable.customerByConCustomerId = null
        }
        this.$refs.backPlan.validate((valid) => {
            if (valid) {
          this.$axios.post('http://localhost:8088/save-planreceivable',
            {
              planreceivableId:this.planreceivable.planreceivableId,
              planreceivableDate:this.planreceivable.planreceivableDate,
              planreceivableNote:this.planreceivable.planreceivableNote,
              planreceivableBack:this.planreceivable.planreceivableBack,
              planreceivableIssue:this.planreceivable.planreceivableIssue,
              planreceivableMoney:this.planreceivable.planreceivableMoney,
              contractByContractId:this.planreceivable.contractByContractId,
              customerByCustomerId:this.planreceivable.customerByCustomerId,
              employeeByEmpId:this.planreceivable.employeeByEmpId
            })
            .then(v => {
              this.findBackPlan()
              this.dialog2 = false
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {
            })
       } else {
         console.log('error submit!!');
         return false;
       }
     });
    },
    //查询回款计划
    findBackPlan(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/pay-back-con-list', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          this.planreceivableList = v.data
          console.log('计划回款集合')
          console.log(this.planreceivableList)
        })
        .catch(function (v) {})
    },
    // 点击跳转到回款计划视图
    openBackView(backId) {
      this.$router.push({path: '/planreceivableview', query: {backId: backId}});
    },
    //点击回款生成回款记录
    clickCreateReceivable(val){
        this.dialog4 = true
        this.planreceivable.planreceivableId = val.planreceivableId
        this.planreceivable.planreceivableDate = val.planreceivableDate
        this.planreceivable.planreceivableNote  = val.planreceivableNote
        this.planreceivable.planreceivableBack  = val.planreceivableBack
        this.planreceivable.planreceivableIssue  = val.planreceivableIssue
        this.planreceivable.planreceivableMoney = val.planreceivableMoney
        this.planreceivable.contractByContractId = val.contractByContractId
        this.planreceivable.customerByCustomerId = val.customerByCustomerId
        this.planreceivable.employeeByEmpId = val.employeeByEmpId

        this.collectionrecords.collectionrecordPeriods = val.planreceivableIssue
        this.collectionrecords.collectionrecordDate = this.addDate()
        this.collectionrecords.collectionrecordAmount = val.planreceivableMoney
        this.collectionrecords.contractByContractId = val.contractByContractId
        this.collectionrecords.customerByCustomerId = this.planreceivable.customerByCustomerId
        this.collectionrecords.planreceivableByPlanreceivableId = val
        this.collectionrecords.collectionrecordInvoiced = 1
        this.collectionrecords.employeeByEmpId = this.planreceivable.employeeByEmpId

        if(this.planreceivable.planreceivableMoney==this.contract.contractTotalAmount){
            this.contract.contractStatus = 3
        }
    },
    //新增回款记录提示
    newReceivableRecords(){
      this.$message('请先建立回款计划，点击回款后再生成回款记录');
    },
    //查询回款记录
    findReceivableRecords(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/back-records-con-list', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          this.ReceivableRecordsList = v.data
          console.log(this.ReceivableRecordsList)
        })
        .catch(function (v) {})
    },
    //回款记录数据回显
    openReceivableRecords(val){
      this.dialog4 = true
      this.collectionrecords.collectionrecordId = val.collectionrecordId
      this.collectionrecords.collectionrecordPeriods = val.collectionrecordPeriods
      this.collectionrecords.collectionrecordDate = val.collectionrecordDate
      this.collectionrecords.collectionrecordAmount = val.collectionrecordAmount
      this.collectionrecords.collectionrecordPaystyle = val.collectionrecordPaystyle
      this.collectionrecords.collectionrecordSort = val.collectionrecordSort
      this.collectionrecords.collectionrecordInvoiced = val.collectionrecordInvoiced
      this.collectionrecords.collectionrecordNote = val.collectionrecordNote
      this.collectionrecords.collectionrecordReturnlist = val.collectionrecordReturnlist
      this.collectionrecords.contractByContractId = val.contractByContractId
      this.collectionrecords.customerByCustomerId = val.customerByCustomerId
      this.collectionrecords.employeeByEmpId = val.employeeByEmpId
    },
    // 关闭回款记录dialog事件
    closeDialogBackRecords(){
      this.$refs.backRecords.resetFields()
      this.collectionrecords = {
        collectionrecordId:0,
        collectionrecordPeriods:0,
        collectionrecordDate:'',
        collectionrecordAmount:0.00,
        collectionrecordPaystyle:0,
        collectionrecordSort:0,
        collectionrecordInvoiced:0,
        collectionrecordNote:'',
        collectionrecordCustomerName:'',
        collectionrecordEmpName:'',
        collectionrecordReturnlist:null,
        contractByContractId:'',//合同
        employeeByEmpId:'',//员工
        customerByCustomerId:''//客户
      }
      this.planreceivable = {
        employeeByEmpId:'',//所有者(负责人)
        planreceivableId:0,
        planreceivableDate:'',//回款日期
        planreceivableNote:'',//备注
        planreceivableBack:'',//是否回款
        planreceivableIssue:1,//期次
        planreceivableMoney:'0.0',//金额
        planreceivableEmpName:'',//所有者
        planreceivablePrincipal:'',//负责人
        customerByCustomerId:'',//客户
        contractByContractId:''//合同订单
      },
      this.RecordInvoice = {
        invoicerecordId:0,
        invoicerecordContent:'',
        invoicerecordType:'',
        invoicerecordAmount:0.00,
        invoicerecordNo:'',
        invoicerecordDate:'',
        invoicerecordPeriods:1,
        invoicerecordHandlers:'',
        invoicerecordBack:'',
        invoicerecordPlanback:'',
        invoicerecordNote:'',
        invoicerecordCustomerName:'',
        contractByContractId:'',
        employeeByEmpId:'',
        customerByCustomerId:''
      }
    },
    //生成/修改回款记录
    addBackRecords(){
        if(this.collectionrecords.collectionrecordId === 0){
          this.$refs.backRecords.validate((valid) => {
            if(valid){
              //修改回款计划状态
              this.planreceivable.planreceivableBack = 2
              this.$axios.post('http://localhost:8088/save-planreceivable',this.planreceivable)
                .then(v => {
                  this.findBackPlan()
                })
                .catch(function (v) {
                })
              //修改合同订单已回款金额
              this.contract.contractBackAmount = this.contractBackAmount
              this.$axios.post('http://localhost:8088/save-contract',
                {
                  contractId:this.contract.contractId,
                  contractTheme:this.contract.contractTheme,
                  contractChance:this.contract.contractChance,
                  contractNo:this.contract.contractNo,
                  contractSort:this.contract.contractSort,
                  contractTotalAmount:this.contract.contractTotalAmount,
                  contractPaymentMethods:this.contract.contractPaymentMethods,
                  contractStartTime:this.contract.contractStartTime,
                  contractEndTime:this.contract.contractEndTime,
                  contractCustomerSigner:this.contract.contractCustomerSigner,
                  contractOurSigner:this.contract.contractOurSigner,
                  contractEmpName:this.contract.contractEmpName,
                  contractBackAmount:this.contract.contractBackAmount,
                  contractMoneyMethods:this.contract.contractMoneyMethods,
                  contractStatus:this.contract.contractStatus,
                  contractInvoiceAmount:this.contract.contractInvoiceAmount,
                  contractBodyText:this.contract.contractBodyText,
                  contractNote:this.contract.contractNote,
                  contractByContractId:this.contract.contractByContractId,
                  employeeByEmpId: this.contract.employeeByEmpId,
                  customerByCustomerId:this.contract.customerByCustomerId,
                  opportunity: this.contract.opportunityByOppId,
                  details:this.detailList,
                  contractAppStatus: this.contract.contractAppStatus,
                  employeeByAppEmpId: this.contract.employeeByAppEmpId
                }).then(v => {
              })
                .catch(function (v) {
                })
              //生成回款记录
              this.$axios.post('http://localhost:8088/save-collectionrecord',this.collectionrecords)
                .then(v => {
                  this.findReceivableRecords()
                  this.dialog4 = false
                })
                .catch(function (v) {
                })
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        }else {
          this.$refs.backRecords.validate((valid) => {
            if (valid) {
              this.$axios.post('http://localhost:8088/save-collectionrecord',this.collectionrecords)
                .then(v => {
                  this.findReceivableRecords()
                  this.dialog4 = false
                })
                .catch(function (v) {
                })
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        }
    },
    //点击开票生成票据
    clickCreateBackInvoice(val){
      this.dialog5 = true
      this.RecordInvoice.invoicerecordAmount = val.collectionrecordAmount
      this.RecordInvoice.invoicerecordDate = this.addDate()
      this.RecordInvoice.invoicerecordPeriods = val.collectionrecordPeriods
      this.RecordInvoice.invoicerecordBack = 2
      this.RecordInvoice.invoicerecordPlanback = 3
      this.RecordInvoice.customerByCustomerId = val.customerByCustomerId
      this.RecordInvoice.contractByContractId = val.contractByContractId
      this.RecordInvoice.employeeByEmpId = this.collectionrecords.employeeByEmpId

      this.collectionrecords.collectionrecordId = val.collectionrecordId
      this.collectionrecords.collectionrecordPeriods = val.collectionrecordPeriods
      this.collectionrecords.collectionrecordDate = val.collectionrecordDate
      this.collectionrecords.collectionrecordAmount = val.collectionrecordAmount
      this.collectionrecords.collectionrecordPaystyle = val.collectionrecordPaystyle
      this.collectionrecords.collectionrecordSort = val.collectionrecordSort
      this.collectionrecords.collectionrecordInvoiced = val.collectionrecordInvoiced
      this.collectionrecords.collectionrecordNote = val.collectionrecordNote
      this.collectionrecords.collectionrecordReturnlist = val.collectionrecordReturnlist
      this.collectionrecords.contractByContractId = val.contractByContractId
      this.collectionrecords.customerByCustomerId = val.customerByCustomerId
      this.collectionrecords.employeeByEmpId = val.employeeByEmpId
      this.collectionrecords.planreceivableByPlanreceivableId = val.planreceivableByPlanreceivableId
    },
    //新建开票记录
    newRecordInvoice(){
      this.dialog5 = true
      this.RecordInvoice.invoicerecordDate = this.addDate()
      this.RecordInvoice.invoicerecordBack = 2
      this.RecordInvoice.invoicerecordPlanback = 3
      this.RecordInvoice.contractByContractId = this.collectionrecords.contractByContractId
      this.RecordInvoice.employeeByEmpId = this.collectionrecords.employeeByEmpId
      this.RecordInvoice.customerByCustomerId = this.collectionrecords.customerByCustomerId
    },
    //开票记录数据回显
    openPayInvoice(val){
      this.dialog5 = true
      this.RecordInvoice.invoicerecordId = val.invoicerecordId
      this.RecordInvoice.invoicerecordContent = val.invoicerecordContent
      this.RecordInvoice.invoicerecordType = val.invoicerecordType
      this.RecordInvoice.invoicerecordAmount = val.invoicerecordAmount
      this.RecordInvoice.invoicerecordNo = val.invoicerecordNo
      this.RecordInvoice.invoicerecordDate = val.invoicerecordDate
      this.RecordInvoice.invoicerecordPeriods = val.invoicerecordPeriods
      this.RecordInvoice.invoicerecordHandlers = val.invoicerecordHandlers
      this.RecordInvoice.invoicerecordBack = val.invoicerecordBack
      this.RecordInvoice.invoicerecordPlanback =val.invoicerecordPlanback
      this.RecordInvoice.invoicerecordNote  = val.invoicerecordNote
      this.RecordInvoice.invoicerecordCustomerName = val.invoicerecordCustomerName
      this.RecordInvoice.contractByContractId = val.contractByContractId
      this.RecordInvoice.employeeByEmpId = val.employeeByEmpId
      this.RecordInvoice.customerByCustomerId = val.customerByCustomerId
    },
    //由发票生成回款计划
    clickCreateBackPlan(val){
      this.dialog2 = true
      this.planreceivable.customerByCustomerId = this.contract.customerByCustomerId
      this.planreceivable.planreceivableDate = this.addDate()
      this.planreceivable.planreceivableIssue = val.invoicerecordPeriods
      this.planreceivable.planreceivableMoney = val.invoicerecordAmount
      this.planreceivable.contractByContractId = val.contractByContractId
      this.planreceivable.employeeByEmpId = this.emp
      this.planreceivable.planreceivableBack = 1

      this.RecordInvoice.invoicerecordId = val.invoicerecordId
      this.RecordInvoice.invoicerecordContent = val.invoicerecordContent
      this.RecordInvoice.invoicerecordType = val.invoicerecordType
      this.RecordInvoice.invoicerecordAmount = val.invoicerecordAmount
      this.RecordInvoice.invoicerecordNo = val.invoicerecordNo
      this.RecordInvoice.invoicerecordDate = val.invoicerecordDate
      this.RecordInvoice.invoicerecordPeriods = val.invoicerecordPeriods
      this.RecordInvoice.invoicerecordHandlers = val.invoicerecordHandlers
      this.RecordInvoice.invoicerecordBack = val.invoicerecordBack
      this.RecordInvoice.invoicerecordPlanback =val.invoicerecordPlanback
      this.RecordInvoice.invoicerecordNote  = val.invoicerecordNote
      this.RecordInvoice.invoicerecordCustomerName = val.invoicerecordCustomerName
      this.RecordInvoice.contractByContractId = val.contractByContractId
      this.RecordInvoice.employeeByEmpId = val.employeeByEmpId
      this.RecordInvoice.customerByCustomerId = val.customerByCustomerId
    },
    //新增开票判断
    addBackInvoiceJudge(){
      if(this.RecordInvoice.invoicerecordId === 0){
        this.$refs.invoice.validate((valid) => {
            if (valid) {
            // 修改回款记录状态
            if(this.collectionrecords.collectionrecordId !== 0){
              this.collectionrecords.collectionrecordInvoiced = 2
              this.$axios.post('http://localhost:8088/save-collectionrecord',this.collectionrecords)
                .then(v => {
                  console.log("测试开票后查询回款记录-----------------")
                  this.findReceivableRecords()
                })
                .catch(function (v) {
                })
            }
        //修改合同订单已开票金额
        this.contract.contractInvoiceAmount = this.contractInvoiceAmount
        this.$axios.post('http://localhost:8088/save-contract',
          {
            contractId:this.contract.contractId,
            contractTheme:this.contract.contractTheme,
            contractChance:this.contract.contractChance,
            contractNo:this.contract.contractNo,
            contractSort:this.contract.contractSort,
            contractTotalAmount:this.contract.contractTotalAmount,
            contractPaymentMethods:this.contract.contractPaymentMethods,
            contractStartTime:this.contract.contractStartTime,
            contractEndTime:this.contract.contractEndTime,
            contractCustomerSigner:this.contract.contractCustomerSigner,
            contractOurSigner:this.contract.contractOurSigner,
            contractEmpName:this.contract.contractEmpName,
            contractBackAmount:this.contract.contractBackAmount,
            contractMoneyMethods:this.contract.contractMoneyMethods,
            contractStatus:this.contract.contractStatus,
            contractBodyText:this.contract.contractBodyText,
            contractNote:this.contract.contractNote,
            contractInvoiceAmount:this.contract.contractInvoiceAmount,
            contractByContractId:this.contract.contractByContractId,
            employeeByEmpId: this.contract.employeeByEmpId,
            customerByCustomerId:this.contract.customerByCustomerId,
            opportunity: this.contract.opportunityByOppId,
            details:this.detailList,
            contractAppStatus: this.contract.contractAppStatus,
            employeeByAppEmpId: this.contract.employeeByAppEmpId
          }).then(v => {
        })
          .catch(function (v) {
          })
            // 生成发票
            this.RecordInvoice.invoicerecordNo = this.invoiceNo()
            this.addBackInvoice()
            } else {
              console.log('error submit!!');
              return false;
            }
        })
      }else {
        this.$refs.invoice.validate((valid) => {
            if (valid) {
            this.addBackInvoice()
            } else {
              console.log('error submit!!');
              return false;
            }
        })
      }
    },
    // 开票单号
    invoiceNo() {
      var payNo = "";
      for (var i = 0; i < 4; i++) //j位随机数，用以加在时间戳后面。
      {
        payNo += Math.floor(Math.random() * 10);
      }
      payNo = 'CYJ' + this.addDateNum() + payNo;
      return payNo;
    },
    // 获取当前日期
    addDateNum () {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year  + month  + strDate;
      return currentdate;
    },
    //新增开票
    addBackInvoice(){
      if(this.RecordInvoice.customerByCustomerId === ''){
        this.RecordInvoice.customerByCustomerId = null
      }
          this.$axios.post('http://localhost:8088/save-invoicerecord',
            {
              invoicerecordId:this.RecordInvoice.invoicerecordId,
              invoicerecordContent:this.RecordInvoice.invoicerecordContent,
              invoicerecordType:this.RecordInvoice.invoicerecordType,
              invoicerecordAmount:this.RecordInvoice.invoicerecordAmount,
              invoicerecordNo:this.RecordInvoice.invoicerecordNo,
              invoicerecordDate:this.RecordInvoice.invoicerecordDate,
              invoicerecordPeriods:this.RecordInvoice.invoicerecordPeriods,
              invoicerecordHandlers:this.RecordInvoice.invoicerecordHandlers,
              invoicerecordBack:this.RecordInvoice.invoicerecordBack,
              invoicerecordPlanback:this.RecordInvoice.invoicerecordPlanback,
              invoicerecordNote:this.RecordInvoice.invoicerecordNote,
              invoicerecordCustomerName:this.RecordInvoice.invoicerecordCustomerName,
              contractByContractId:this.RecordInvoice.contractByContractId,
              employeeByEmpId:this.RecordInvoice.employeeByEmpId,
              customerByCustomerId:this.RecordInvoice.customerByCustomerId
            })
            .then(v => {
              // 1、刷新数据
              this.findBackInvoice()
              this.dialog5 = false
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {
            })
    },
    //查询开票记录
    findBackInvoice(){
      let conId = this.$route.query.contractId
      this.$axios.get('http://localhost:8088/back-invoice-con-list', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          this.RecordInvoiceList = v.data
          console.log('开票记录集合')
          console.log(this.RecordInvoiceList)
          this.judgeBackInvoicePeriods()
        })
        .catch(function (v) {})
    },
    // 判断发票期次
    judgeBackInvoicePeriods(){
      this.RecordInvoiceList.forEach(v => {
        if (this.backInvoiceOptions.forEach(value => {
          if (value.value === v.invoicerecordPeriods){
            value.disabled = true
          }
        })
        ){
        }
      })
      console.log(this.backPlanOptions)
    },
    // 关闭发票dialog事件
    closeDialogBackInvoice(){
      this.$refs.backInvoice.resetFields()
      this.collectionrecords = {
        collectionrecordId:0,
        collectionrecordPeriods:0,
        collectionrecordDate:'',
        collectionrecordAmount:0.00,
        collectionrecordPaystyle:0,
        collectionrecordSort:0,
        collectionrecordInvoiced:0,
        collectionrecordNote:'',
        collectionrecordCustomerName:'',
        collectionrecordEmpName:'',
        collectionrecordReturnlist:'',
        contractByContractId:'',//合同
        employeeByEmpId:'',//员工
        customerByCustomerId:'',//客户
        planreceivableByPlanreceivableId:''
      }
      this.RecordInvoice = {
        invoicerecordId:0,
        invoicerecordContent:'',
        invoicerecordType:0,
        invoicerecordAmount:0.00,
        invoicerecordNo:'',
        invoicerecordDate:'',
        invoicerecordPeriods:0,
        invoicerecordHandlers:'',
        invoicerecordBack:0,
        invoicerecordPlanback:0,
        invoicerecordNote:'',
        invoicerecordCustomerName:'',
        contractByContractId:'',
        employeeByEmpId:'',
        customerByCustomerId:''
      }
    },
  },
  created: function () {
    this.loginEmp()
    this.initData()
    this.findDetail()
    this.findApproval()
    this.findAppRecord()
    this.findAppRecordBy()
    this.findBackPlan()
    this.findReceivableRecords()
    this.findBackInvoice()
  },
  filters: {
    formatDate: function(time) {
      if(time!=null&&time!="")
      {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      }else{
        return "";
      }
    }
  },
  computed:{
    contractBackAmount(){
      var total = 0;
      this.ReceivableRecordsList.forEach(v=>{
        total += parseFloat(v.collectionrecordAmount);
      });
      total +=  parseFloat(this.collectionrecords.collectionrecordAmount)
      return total;
    },
    contractInvoiceAmount(){
      var total = 0;
      this.RecordInvoiceList.forEach(v=>{
        total += parseFloat(v.invoicerecordAmount);
      });
      total +=  parseFloat(this.RecordInvoice.invoicerecordAmount)
      return total;
    }
  }
}
</script>

<style>
  .dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;

  }
  .dialog__header{
    padding: 20px 20px 20px;
  }
  .el-dialog__body {
    padding:0 20px 30px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
  .font-13-bold{
    color: #000000;
    font-weight: bold;
    font-size: 13px;
  }
  .font-13{
    font-size: 13px;
  }
  .font-14{
    font-size: 14px;
  }
  .cursor{
    cursor: pointer;
  }
  .detail{
    background: #E9EEF3;
    padding: 20px;
  }
  .el-drawer__header{
    font-size: 20px;
  }
  .opera-no{
    color: #98a6ad;
    font-size: 18px;
    width: 80px;
    text-align: center;
  }
  .opera{
    color: #5d9cec;
    font-size: 18px;
    cursor: pointer;
    width: 80px;
    text-align: center;
  }
  .opera:hover{
    color: #215ca0;
  }
  .margin-r-3{
    margin-right: 3px;
  }
  .form-inline {
    position: relative;
    top: -5px;
    left: 100px;
  }
  .margin-r-3{
    margin-right: 3px;
  }
  .m-b-10{
    margin-bottom: 10px;
  }
  .m-b-20{
    margin-bottom: 20px;
  }
  .m-t-20{
    margin-top: 20px;
  }
  .m-t-30{
    margin-top: 30px;
  }
  .m-l-20{
    margin-left: 20px;
  }
  .b-g-f{
    background: #ffffff;
  }
  .p-l-20{
    padding-left: 20px;
  }
  .p-r-20{
    padding-right: 20px;
  }
  .c-b{
    color: black;
  }
  .f-w{
    font-weight: bold;
  }
  .p-10-20{
    padding:10px 20px;
  }
  .margin-r-3{
    margin-right: 3px;
  }
  .border-style{
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  }
  .font-13-bold{
    color: #000000;
    font-weight: bold;
    font-size: 13px;
  }
  .font-13{
    font-size: 13px;
  }
  .font-18{
    font-size: 18px;
  }
  .oppv .cursor{
    cursor: pointer;
  }
  .w-95{
    width: 95%;
  }
  .c-dl{
    color: #9999ff;
  }
  .c-r{
    color: #ff0000;
  }
</style>

